<template>
  <div class="iot-page">
    <div class="inner">
      <el-container class="page-iot-container" direction="vertical">
        <iotHeader></iotHeader>
        <el-container>
          <el-main class="iot-main">
            <div class="iot-left">
              <iot-blk
                class="today-blk device-blk"
                title="单位"
                :moreType="0"
                style="height: 98.4% !important"
              >
                <div class="">
                  <div class="business-wrap">
                    <UnitVideoTree @transferData="getData"></UnitVideoTree>
                  </div>
                </div>
              </iot-blk>
            </div>
            <div class="iot-center">
              <iot-blk
                class="realtime-blk"
                title="实时监控"
                :moreType="0"
                size="big"
                style="height: 66% !important"
              >
                <Video
                  v-if="closeVideo"
                  style="height: 2.6rem !important"
                  :productId="videoData.productId"
                  :id="videoData.id"
                  :number="videoData.number"
                  :scale="1"
                />
                <div
                  v-else
                  style="height: 2.6rem !important; background: #000"
                ></div>
              </iot-blk>
              <iot-blk
                class="realtime-blk mt-20"
                :moreType="0"
                size="big"
                style="height: 30% !important"
              >
                <div
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                  "
                >
                  <el-empty description="暂无数据" :image-size="80"></el-empty>
                </div>
              </iot-blk>
            </div>
            <div class="iot-right">
              <iot-blk
                style="height: 98.4% !important"
                class="device-blk"
                :moreType="0"
              >
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="实时告警" name="1">
                    <div class="">
                      <div class="alarm mb-10">
                        <div>告警时间:2024-11-29 09.22:23</div>
                        <div>告警单位名称:演示充电棚</div>
                        <div>告警设备名称:将臣4G摄像头</div>
                        <div>告警类型:火灾告罄</div>
                        <img src="../assets/images/bg-login.jpg" alt="">
                        <div class="flex around mt-10">
                          <el-button type="primary" >查看视频</el-button>
                          <el-button type="danger">一键灭火</el-button>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="告警任务" name="2">配置管理</el-tab-pane>
                </el-tabs>
              </iot-blk>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import iotHeader from "@/components/iot/IOTHeader.vue";
import UnitVideoTree from "../components/unitVideoTree.vue";
import livePlayer from "@/components/screenVideoPlayer/player";
import Video from "@/components/device/Video.vue";
export default {
  name: "Home",
  props: {
    winH: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return {
      videoData: {},
      closeVideo: false,
      activeName: "1",
    };
  },
  components: {
    iotHeader,
    UnitVideoTree,
    livePlayer,
    Video,
  },
  watch: {},
  computed: {
    ...mapState(["scale", "siteInfos"]),
  },
  mounted() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    getData(val) {
      this.closeVideo = !this.closeVideo;
      this.videoData = val;
      console.log(val);
    },
  },
  destroyed() {},
};
</script>
<style lang="less">
@import "../assets/css/IOT.less";
</style>
<style lang="less" scoped>
.business-wrap {
  height: 4.2rem;
  overflow: auto;
}
.iot-page {
  .inner {
    position: none;
    width: 100%;
  }
}
// .page-header.iot-header {
//     height: 0.57291667rem !important;
// }
.inner {
  width: 100% !important;
}
/deep/.iot-main {
  display: flex !important;
  justify-content: space-between !important;
  .iot-left,
  .iot-right {
    width: 22%;
    position: inherit !important;
  }
  .iot-blk {
    height: auto;
  }
}
.iot-center {
  width: 55%;
}
.page-iot-container {
}
.areaTree {
  overflow: auto !important;
  height: 1.2rem !important;
  .area-tree {
    padding: 0 !important;
    height: 100% !important;
  }
}
/deep/.unit-list {
  height: 1.8rem !important;
}
/deep/ .flex-1 {
  height: 100% !important;
}
/deep/ .el-tabs__item.is-active {
  color: #fff !important;
}
/deep/ .el-tabs__item {
  color: #fff !important;
}
.alarm {
  border: 1px solid #c1c2c7;
  padding: 10px;
  font-size: 13px;
  img{
    width: 100%;
    height: 1rem;
    margin-top: 10px;
  }
}
</style>
